<template>
  <div class="app-container">
    <el-row type="flex" align="center" style="align-items: center">
      <data-source-chose @changeConnName="changeConn" @changeNamespace="changeNamespace"/>
      <el-tag v-if="clientInfo" type="info" class="margin-left">{{clientInfo.databaseProductName}} - {{clientInfo.databaseProductVersion}}</el-tag>
    </el-row>
    <el-row>
      <el-col :span="10">
        <p class="text-forestgreen">搜索到数据表后, 点击表格行可以获取数据表详细信息</p>
        <TableSearch ref="tableSearch" :conn-name="connName" :namespace="namespace" @click-row="showTableProperties" />
      </el-col>
      <el-col :span="14" v-if="connName && tableMeta && tableMeta.table">
        <TableProperties ref="tableProperties" :tableMeta="tableMeta" :conn-name="connName" />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import TableSearch from '@/views/database/TableSearch'
import TableProperties from '@/views/database/TableProperties'
import DataSourceChose from '@/views/database/DataSourceChose'

import database from '@/api/database'

export default {
  name: 'metadata',
  components: { TableSearch, TableProperties , DataSourceChose},
  data(){
    return {
      tableMeta: {},
      connName: null,
      namespace: null,
      clientInfo: null
    }
  },
  methods: {
    changeConn(connName){
      this.connName = connName;
      this.tableMeta = {};

      // 获取数据库版本信息
      this.refreshClientInfo()
    },
    refreshClientInfo(){
      database.clientInfo(this.connName).then(res => {
        this.clientInfo = res.data
      })
    },
    changeNamespace(namespace){
      this.namespace = namespace;
      this.tableMeta = {};
      this.$nextTick(() => {
        this.$refs.tableSearch.searchTables()
      })

    },
    showTableProperties(row){
      this.tableMeta = row;
      this.$nextTick(() => {
        this.$refs.tableProperties.activeCurrentTab();
      })
    }
  },
  mounted() {
  },
  computed: {

  }
}
</script>


